{% load i18n horizon humanize sizeformat %}
<div class="quota-dynamic" style="border-bottom:1px solid #eeeeee">
		<h3 class="quota-heading">{% trans "Limit Summary" %}</h3>
</div>
<!-- <div class="container" style="border-bottom:1px solid #eeeeee"> -->
<div class="row">
	<div class="col-sm-4" style="padding-top:10px">
		<!-- <h3 class="quota-heading">{% trans "Limit Summary" %}</h3>  -->
	{% for quota in charts %}
		
			<div class="row" style="border-right:2px solid #eeeeee;">
					<div class="col-xs-4 col-sm-3"><strong>{{ quota.name }}</strong></div>
					<div class="col-xs-4 col-sm-6">
						<div class="progress">
						 	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width:1em;width:{% widthratio quota.used quota.max 100 %}%">
						   		 <span>{% widthratio quota.used quota.max 100 %}%</span>
						  	</div>
						</div>
					</div>
					<div class="col-xs-4 col-sm-3">
						{% if forloop.counter != 3 %}
						<strong>{% if quota.max|quotainf != '-1' %}
					        {% blocktrans with used=quota.used|intcomma available=quota.max|quotainf|intcomma%}
					       <!--  Used --> <span> {{ used }} </span>/<!-- of --><span> {{ available }} </span>{% endblocktrans %}
					      {% else %}
					        {% blocktrans with used=quota.used|intcomma %}
					       <!--  Used  --><span> {{ used }} </span>(No Limit){% endblocktrans %}
					      {% endif %}
					    </strong>
					    {% else %}
					    <strong>{% if quota.max|quotainf != '-1' %}
					        {% blocktrans with used=quota.used|intcomma|filesizeformat|cut:"KB"|floatformat:"0"|default:"0" available=quota.max|quotainf|intcomma|filesizeformat|cut:"KB"|floatformat:"0"|default:"0" %}
					       <!--  Used --> <span> {{ used }} </span>/<!-- of --><span> {{ available }} </span>{% endblocktrans %}
					      {% else %}
					        {% blocktrans with used=quota.used|intcomma %}
					       <!--  Used  --><span> {{ used }} </span>(No Limit){% endblocktrans %}
					      {% endif %}
					      </strong>
					     {% endif %}
					</div>
				</div>
	{% endfor %}
	</div>
	<div class="col-sm-8" >
		<div class="usage_info_wrapper">
			 <div class="quota-dynamic">
		    {% for quota in charts %}
			  <div class="d3_quota_bar">
			      <strong> {{ quota.name }}
			      </strong>
			      <div class="d3_pie_chart_usage" data-used="{% quotapercent quota.used quota.max %}"></div>
			      {% if forloop.counter != 3 %}
				      <strong> {% if quota.max|quotainf != '-1' %}
					        {% blocktrans with used=quota.used|intcomma available=quota.max|quotainf|intcomma %}
					          <span> {{ used }} </span>/<span> {{ available }} </span>{% endblocktrans %}
					      {% else %}
					        {% blocktrans with used=quota.used|intcomma %}
					         <span> {{ used }} </span>(No Limit){% endblocktrans %}
					      {% endif %}
					  </strong>
				  {% else %}
					  <strong> {% if quota.max|quotainf != '-1' %}
						        {% blocktrans with used=quota.used|intcomma|filesizeformat|cut:"KB"|floatformat:"0"|default:"0" available=quota.max|quotainf|intcomma|filesizeformat|cut:"KB"|floatformat:"0"|default:"0" %}
						          <span> {{ used }} </span>/<span> {{ available }} </span>{% endblocktrans %}
						      {% else %}
						        {% blocktrans with used=quota.used|intcomma %}
						         <span> {{ used }} </span>(No Limit){% endblocktrans %}
						      {% endif %}
					  </strong>
				  {% endif %}
			    </div>
		    {% endfor %}
		</div>
	</div>
	</div>
</div>
<!-- </div> -->


